<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
  * {
        padding: 0;
        margin: 0;
    }
    main {
      width: 100vw;
      height: 100vh;
      background: #2c3e50;
      display: flex;
      justify-content: center;
      align-items: center;
      transform-style: preserve-3d;
      transform: perspective(900px)
    }
    div{
      width: 200px;
      height: 200px;
      background-color: red;
      position: relative;
      transform:rotate(45deg);
      animation:hd 1s infinite alternate;
      margin-right: 300px;
    }
    @keyframes hd {
       to{
        transform: rotate(45deg) scale(2);
       }
    }
    div::before{
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color:red ;
      transform: translateX(-50%)
    }
    div::after{
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color:red ;
      transform: translateY(-50%)
    }
    p{
      width: 200px;
      height: 200px;
      background-color: red;
      border-radius: 50%;
      animation:hsd 1s infinite alternate-reverse
    }
    @keyframes hsd {
       to{
        transform: translateY(-300px);
       }
    }
    section{
      width: 200px;
      height: 200px;
      background-color: red;
      transform:rotateZ(0deg) translateZ(20px);
      animation:rotate 1s 
    }
    @keyframes rotate {
       to{
        transform:rotateZ(180deg) translateZ(500px);
       }
    }
</style>
<body>
  <main>
      <div onclick="handleClick()"></div>
      <p></p>
      <section></section>
  </main>
</body>
<script>
    const Pdom=document.querySelector("p");
    const divdom=document.querySelector("div");
    const sectionDom=document.querySelector("section");
    // 开始事件
    Pdom.addEventListener("animationstart",function(){
      console.log("Pdom animationstart");
    })
    // 结束事件
    Pdom.addEventListener("animationend",function(){
      console.log("Pdom animationend");
    })
    // 重复运动事件
    Pdom.addEventListener("animationiteration",function(){
      console.log("Pdom animationiteration");
    })


    sectionDom.addEventListener("animationstart",function(){
      console.log("sectionDom animationstart");
    })
    sectionDom.addEventListener("animationend",function(){                                                      
      console.log("sectionDom animationend");
    })
    sectionDom.addEventListener("animationiteration",function(){
      console.log("sectionDom animationiteration");
    })
    
    function handleClick(){
      if(divdom.style.animationPlayState == 'paused'){
        divdom.style.animationPlayState = 'running' //恢复动画
      }else{
        divdom.style.animationPlayState = 'paused' // 暂停动画
      }
    }
    
</script>
</html>
